<!DOCTYPE html>
<html>
<head>
    <title>用户注册表单验证</title>
    <style>
        .error {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <h2>用户注册</h2>
    <form id="registerForm" onsubmit="return validateForm()">
        <div>
            <label>用户名: </label>
            <input type="text" id="username" name="username">
            <span id="usernameError" class="error">用户名必须至少3个字符！</span>
        </div>
        <div>
            <label>邮箱: </label>
            <input type="text" id="email" name="email">
            <span id="emailError" class="error">请输入有效的邮箱！</span>
        </div>
        <div>
            <label>密码: </label>
            <input type="password" id="password" name="password">
            <span id="passwordError" class="error">密码必须至少6个字符！</span>
        </div>
        <input type="submit" value="提交">
    </form>

    <script>
        function validateForm() {
            let isValid = true;

            // 用户名验证
            const username = document.getElementById('username').value.trim();
            const usernameError = document.getElementById('usernameError');
            if (username.length < 3) {
                usernameError.style.display = 'inline';
                isValid = false;
            } else {
                usernameError.style.display = 'none';
            }

            // 密码验证
            const password = document.getElementById('password').value;
            const passwordError = document.getElementById('passwordError');
            if (password.length < 6) {
                passwordError.style.display = 'inline';
                isValid = false;
            } else {
                passwordError.style.display = 'none';
            }

            // 邮箱验证
            const email = document.getElementById('email').value.trim();
            const emailError = document.getElementById('emailError');
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailRegex.test(email)) {
                emailError.style.display = 'inline';
                isValid = false;
            } else {
                emailError.style.display = 'none';
            }

            return isValid;
        }
    </script>
</body>
</html>